{% extends 'web/layout/manage.html' %}
{% load static %}
{% load issues_tag %}
{% load dashboard_tag %}
{% block title %}Issues{% endblock title %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/editor-md/css/editormd.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/editor-md/css/editormd.preview.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/dist/css/bootstrap-datepicker.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-select/css/bootstrap-select.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/select2/css/select2.min.css' %}">
<style>
        .table-right > tbody > tr > td.label-left {
            width: 90px;
        }

        .table-right > tbody > tr > td {
            border: 0;
        }    

        .status-count {
            text-align: center;
            margin-top: 10px;
            margin-bottom: 30px;
            font-size: 13px;
        }

        .status-count .count {
            font-size: 15px;
        }

        .status-count a {
            text-decoration: none;
        }

        .user-item .title {
            margin-bottom: 20px;
        }

        .user-item .avatar, .top-10 .avatar {
            float: left;
            margin-right: 10px;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #304659;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
        }

        .user-item .text {
            line-height: 30px;
        }

</style>
{% endblock css %}
{% block content %}

<!-- panel -->
<div class="container-fluid" style="margin-top:20px;" >    <!-- container-fluid -->
    <div class="row">
        
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h5 class="panel-title">新增问题趋势</h5>
                </div> 
                <div class="panel-body">
                   <div id="chart" style="width:100%;min-height:200px"></div>
                </div>
            </div>
            <!-- row可以让panel补齐缺损的部分 -->
            <div class="row">
            
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h5 class="panel-title">问题</h5>
                        </div> 
                        <div class="panel-body ">
                            {% for key,item in status_dict.items %}
                                <div class="col-sm-4 status-count">
                                    <a href="{% url 'web:issues' project_id=request.tracer.project.id %}?status={{ key }}">
                                        <div class="count">{{ item.count }}</div>
                                        <div>{{ item.text }}</div>
                                    </a>
                                </div>
                            {% endfor %}


                        </div>
                    </div>

                </div>
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h5 class="panel-title">项目成员</h5>
                        </div> 
                        <div class="panel-body user-item">
                           <div class="col-sm-12 title">创建者</div>
                                <div class="clearfix" style="margin-bottom: 30px;">
                                    <div class="col-sm-4">
                                        <div class="avatar">{{ request.tracer.project.creator.username.0|upper }}</div>
                                        <div class="text">{{ request.tracer.project.creator.username }}</div>
                                    </div>
                                </div>
                                <div class="col-sm-12 title">参与者</div>
                                <div>
                                    {% for user_id, username in user_list %}
                                        <div class="col-sm-4">
                                            <div class="avatar">{{ username.0|upper }}</div>
                                            <div class="text">{{ username }}</div>
                                        </div>
                                    {% endfor %}
                                </div> 
                            </div>
                        
                        </div>

                    </div>
                </div>

        </div>
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h5 class="panel-title">详细</h5>
                </div> 
                <div class="panel-body">
                    <table class="table table-right">
                            <tbody>
                            <tr>
                                <td class="label-left">项目名称 ：</td>
                                <td>{{ request.tracer.project.name }}</td>
                            </tr>
                            <tr>
                                <td class="label-left">项目描述 ：</td>
                                <td>{{ request.tracer.project.desc }}</td>
                            </tr>
                            <tr>
                                <td class="label-left">创建时间 ：</td>
                                <td>{{ request.tracer.project.create_datetime }}</td>
                            </tr>
                            <tr>
                                <td class="label-left">项目空间 ：</td>
                                <td> {% format_used_space request.tracer.project.used_space%}
                                     / {{ request.tracer.price_policy.project_space }} GB
                                </td>
                            </tr>
                            </tbody>
                        </table>
                </div>
            </div>

        </div>
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h5 class="panel-title">动态</h5>
                </div> 
                <div class="panel-body top-10">
                
                <table class="table">
                            <tbody>
                            {% for item in top_ten_assigned_issues %}
                                <tr>
                                    <td style="width: 46px;">
                                        <div class="avatar">{{ item.creator.username.0|upper }}</div>
                                    </td>
                                    <td>
                                        <div>{{ item.creator.username }}</div>
                                        <div>指派
                                            <a href="{% url 'web:issue_detail' project_id=request.tracer.project.id issue_id=item.id %}">{% adjust_id item.id %}</a>
                                            给 {{ item.assign.username }}
                                        </div>
                                    </td>
                                    <td style="width: 156px;">
                                        {{ item.create_datetime }}
                                    </td>
                                </tr>

                            {% endfor %}
                            </tbody>
                        </table>
                </div>
            </div>

        </div>

    </div>
</div>




{% endblock content %}
{% block js %}
    <script src="{% static 'plugins/highcharts/highcharts.js' %}"></script>
    
<script>
    $(function () {
        initChart();
    })      
    Highcharts.setOptions(
        {
            global:{
                useUTC:false
            }
        }
    )
    function initChart() {
            // chart
            var config = {
                title: {
                    text: null   // 不显示标题
                },
                legend: {
                    enabled: false // 关闭图例提示
                },
                credits: {
                    enabled: false // 关闭版权信息
                },
                yAxis: {
                    title: {
                        text: '问题数量' // Y周文本提示
                    }
                },
                xAxis: {    //x轴参数
                    type: 'datetime',   //类型
                    tickInterval: 60 * 60 * 24 * 1000,  //间隔时间，单位ms，最后结果是1天
                    labels: {   //图标
                        formatter: function () {
                            //不显示年
                            return Highcharts.dateFormat('%m-%d', this.value); 
                        },
                        rotation: -30   //倾斜30度
                    }
                },
                tooltip: {  //鼠标放在数据上显示的内容
                    headerFormat: '<b>{point.key}</b><br>',
                    pointFormat: '<span style="color:{series.color}">\u25CF</span> 数量: {point.y} ',
                    xDateFormat: '%Y-%m-%d',
                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        marker: {
                            lineWidth: 1,
                            lineColor: '#666666'
                        }
                    }
                },
                series: [{//数据为空，通过ajax请求，拿到数据，更新data
                    data: [
                        //[时间戳，值],[1585877845971，值],[时间戳，值],
                    ]
                }]
            };
            $.ajax({
                url: "{% url 'web:issue_chart' project_id=request.tracer.project.id %}",
                type: "GET",
                dataType: "JSON",
                success: function (res) {
                    config.series[0].data = res.data;
                    var chart = Highcharts.chart('chart', config);
                }
            });


        } 

</script>

{% endblock js %}